<!-- BottomNavbar.vue -->
<template>
    <div class="bottom-navbar">
        <router-link to="/" class="nav-item" :class="{ active: isActive('/') }">
            <span class="icon icon-home"></span>
            <span>首页</span>
        </router-link>
        <router-link to="/collect" class="nav-item" :class="{ active: isActive('/collect') }">
            <span class="icon icon-collect"></span>
            <span>收藏</span>
        </router-link>
        <router-link to="/personal" class="nav-item" :class="{ active: isActive('/personal') }">
            <span class="icon icon-personal"></span>
            <span>个人中心</span>
        </router-link>
    </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 自定义方法来判断当前路由是否激活
const isActive = (path) => {
    return route.path === path
}
</script>

<style scoped lang="scss">
.bottom-navbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    height: 9%;
    justify-content: space-around;
    background-color: #dbdbdb;

    .nav-item {
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column; // 改为上下布局
        align-items: center;

        .icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-top: 10px;
            background-size: contain; // 使用contain确保图标不会变形

            &.icon-home {
                background-image: url('@/assets/imgs/homepage.png');
            }

            &.icon-collect {
                background-image: url('@/assets/imgs/collect.png');
            }

            &.icon-personal {
                background-image: url('@/assets/imgs/personal.png');
            }
        }

        // 注意：这里我们使用了嵌套的选择器来只改变激活状态的图标
        &.active {
            .icon {
                &.icon-home {
                    background-image: url('@/assets/imgs/homepageactive.png');
                }

                &.icon-collect {
                    background-image: url('@/assets/imgs/collectactive.png');
                }

                &.icon-personal {
                    background-image: url('@/assets/imgs/personalactive.png');
                }
            }
        }
    }
}

</style>